<template>
    <div class="content-container">
        <Title :icon="'shopping-bag-3-fill'" :title="'最新商机线索'">
            <template #title>
                <el-tooltip placement="top" content="拨打电话、收到私信并且私信带有电话号码、企业号主页留资、企业号转化页留资、落地页线索这些行为">
                    <div slot="content" class="ml-10px">
                        <svg-icon size="14px" icon-class="information-2-fill" class="text-#999"></svg-icon>
                    </div>
                </el-tooltip>
            </template>
            <template #time>
                <svg-icon size="14px" icon-class="refresh-line" class="mr-5px"></svg-icon>更新于今天
            </template>
        </Title>
        <div class="h-400px overflow-hidden business-list">
            <el-scrollbar>
                <ul>
                    <li class="flex justify-between items-center">
                        <div class="flex items-center">
                            <img src="" alt="">
                            <svg-icon size="20px" icon-class="arrow-right-s-fill" class="text-#999"></svg-icon>
                            <div class="flex flex-col justify-center ml-5px">
                                <p>2025年5月15日 15:23:16</p>
                                <span>[来源] 私信---私信留电话</span>
                            </div>
                        </div>
                        <div class="w-160px text-14px text-#333 text-right">
                            联系电话：13999856647
                        </div>
                    </li>
                    <li class="flex justify-between items-center">
                        <div class="flex items-center">
                            <img src="" alt="">
                            <svg-icon size="20px" icon-class="arrow-right-s-fill" class="text-#999"></svg-icon>
                            <div class="flex flex-col justify-center ml-5px">
                                <p>2025年5月15日 15:23:16</p>
                                <span>[来源] 私信---私信留电话</span>
                            </div>
                        </div>
                        <div class="text-14px text-#333">
                            联系电话：13999856647
                        </div>
                    </li>
                    <li class="flex justify-between items-center">
                        <div class="flex items-center">
                            <img src="" alt="">
                            <svg-icon size="20px" icon-class="arrow-right-s-fill" class="text-#999"></svg-icon>
                            <div class="flex flex-col justify-center ml-5px">
                                <p>2025年5月15日 15:23:16</p>
                                <span>[来源] 私信---私信留电话</span>
                            </div>
                        </div>
                        <div class="text-14px text-#333">
                            联系电话：13999856647
                        </div>
                    </li>
                    <li class="flex justify-between items-center">
                        <div class="flex items-center">
                            <img src="" alt="">
                            <svg-icon size="20px" icon-class="arrow-right-s-fill" class="text-#999"></svg-icon>
                            <div class="flex flex-col justify-center ml-5px">
                                <p>2025年5月15日 15:23:16</p>
                                <span>[来源] 私信---私信留电话</span>
                            </div>
                        </div>
                        <div class="text-14px text-#333">
                            联系电话：13999856647
                        </div>
                    </li>
                    <li class="flex justify-between items-center">
                        <div class="flex items-center">
                            <img src="" alt="">
                            <svg-icon size="20px" icon-class="arrow-right-s-fill" class="text-#999"></svg-icon>
                            <div class="flex flex-col justify-center ml-5px">
                                <p>2025年5月15日 15:23:16</p>
                                <span>[来源] 私信---私信留电话</span>
                            </div>
                        </div>
                        <div class="text-14px text-#333">
                            联系电话：13999856647
                        </div>
                    </li>
                    <li class="flex justify-between items-center">
                        <div class="flex items-center">
                            <img src="" alt="">
                            <svg-icon size="20px" icon-class="arrow-right-s-fill" class="text-#999"></svg-icon>
                            <div class="flex flex-col justify-center ml-5px">
                                <p>2025年5月15日 15:23:16</p>
                                <span>[来源] 私信---私信留电话</span>
                            </div>
                        </div>
                        <div class="text-14px text-#333">
                            联系电话：13999856647
                        </div>
                    </li>
                </ul>
            </el-scrollbar>
        </div>
    </div>
</template>

<script setup lang="ts">
import Title from './Title.vue'
</script>

<style lang="scss" scoped>
.business-list{
    
    ul{
        margin: 0 16px;
        li{
            padding: 15px 0;
            border-top:1px solid #edeff5;
            img{
                width: 40px;
                height: 40px;
                margin-right: 10px;
                border-radius: 50%;
            }
            p{
                font-size: 12px;
                color: #999;
                margin-bottom:5px;
            }
            span{
                display: inline-block;
                font-size: 12px;
                line-height: 18px;
                padding: 6px 14px;
                border-radius: 15px;
                color: #e35151;
                background-color: #fff5f5;
            }
        }
    }
}
</style>